var vm = new Vue({
    el:"#app",
    data:{
        uploader:null,
        isShowUploadForm:false,
        fileName:"",
        uploadFiles:[]//上传的文件
    },
    methods:{
        /**
         * 初始化bootstrapTable
         */
        initTable:function(){
            var _this = this;
            $('#tbTestFileManager').bootstrapTable($.extend(bootstrapTableOption,{
                url: g_comm.manager_url+'/testFileManager/list',           //请求后台的URL（*）
                toolbar: '#toolbar',                          //工具按钮用哪个容器
                queryParams: _this.queryParams,               //传递参数（*）
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                columns: [{
                    checkbox: true
                }, {
                    field: 'originalFileName',
                    title: '原始文件名'
                }, {
                    field: 'newFileName',
                    title: '上传后文件名'
                }, {
                    field: 'fileUrl',
                    title: '文件访问URL',
                    formatter:function(value,row,index){
                        return "<a href='"+value+"' target='_blank'>"+value+"</a> ";
                    }
                }, {
                    field: 'fileLength',
                    title: '文件大小',
                    formatter:function(value,row,index){
                       return formatFileLenth(value);
                    }
                }, {
                    field: 'createUser',
                    title: '上传用户'
                }, {
                    field: 'createTime',
                    title: '上传时间',
                    formatter:function(value,row,index){
                        if(value!=null){
                            return new Date(value).toString("yyyy-MM-dd HH:mm:ss");
                        }else{
                            return "";
                        }
                    }
                }
                ],
                detailView: true,
                detailFormatter: function(index, row) {
                    var _html = '<p>保存路径：'+ row.savePath +'</p>' +
                        '<p>上传耗时(毫秒)：'+ row.useTime+'</p>' +
                        '<p>文件MD5值：'+ row.fileMd5 +'</p>'+
                        '<p>存储方式：'+ row.storageType +'</p>'
                    return _html;
                }
            }));
        },
        del:function(){
            //获取选中的行
            var selectRows = $('#tbTestFileManager').bootstrapTable('getSelections');
            if(selectRows.length==0){
                layer.alert('请选择要删除的数据!',{
                    title: '提示框',
                    icon:0
                });
                return;
            }
            var ids = [];
            $(selectRows).each(function (index, obj) {
                ids.push(obj.id+"#"+obj.savePath);//使用#将id和保存路径拼接，服务端删除物理文件时需要用到
            });
            parent.layer.confirm("你确定是要删除吗！", {btn: ['确定','取消']},
                function(){//确定事件
                    //关闭confirm Dialog
                    parent.layer.closeAll('dialog');
                    $.ajax({
                        url: g_comm.manager_url+"/testFileManager/delete",
                        contentType:"application/json",//以json的方式提交到服务端
                        data: JSON.stringify(ids),//序列化
                        success: function(r){
                            if(r.code == 0){
                                layer.msg('删除成功！', {icon: 1});
                                //重新刷新数据
                                $('#tbTestFileManager').bootstrapTable('refresh');
                            }else{
                                layer.alert(r.msg,{
                                    title: '提示框',
                                    icon:0
                                });
                            }
                        }
                    });
                });
        },

        /**
         * 查询参数
         * @param params
         */
        queryParams:function (params) {
            return {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                fileName:this.fileName
            };
        },
        initUploader:function(){
            this.uploader = $("#uploader").pluploadQueue({
                runtimes : 'html5,flash',//设置运行环境，会按设置的顺序，可以选择的值有html5,gears,flash,silverlight,browserplus,html4
                flash_swf_url :'plugin/plupload-2.3.4/js/Moxie.swf',// Flash环境路径设置
                silverlight_xap_url : 'plugin/plupload-2.3.4/js/Moxie.xap',//silverlight环境路径设置
                url : g_comm.file_url+'/plUploadServlet',//处理上传文件的Controller
                max_file_size : '10gb',//100b, 10kb, 10mb, 1gb
                chunk_size : '1mb',//分块大小，小于这个大小的不分块
                unique_names : true,//生成唯一文件名
                multipart_params:{//上传时的附加参数，以键/值对的形式传入
                    "uploadType":"SFTP"//上传方式
                },
                // 如果可能的话，压缩图片大小
                // resize : { width : 320, height : 240, quality : 90 },
                /*
                 注释掉filters，解决在Chrome下选择文件时file打开很慢
                 // 指定要浏览的文件类型
                 filters : [ {
                 title : 'Image files',
                 extensions : 'jpg,gif,png'
                 }, {
                 title : 'Zip files',
                 extensions : 'zip,7z,rar'
                 } ],*/
                init : {
                    FileUploaded : function(up, file, info) {//当队列中的某一个文件上传完成后触发
                        console.log("队列中的某一个文件上传完成，触发FileUploaded",file);
                        var r = $.parseJSON(info.response);
                        if (r.code == 0) {
                            var data = r.data;
                            console.log("文件上传结果：",data);
                            var uploadFile = {};
                            uploadFile.originalFileName = file.name;//原始文件名
                            uploadFile.newFileName = data.newFileName;
                            uploadFile.savePath = data.savePath;
                            uploadFile.fileUrl = data.fileUrl;
                            uploadFile.fileSuffix = data.fileSuffix;
                            uploadFile.storageType = data.storageType;
                            uploadFile.fileLength = data.fileLength;
                            uploadFile.fileMd5 = data.fileMd5;//文件MD5
                            uploadFile.useTime = data.useTime;
                            uploadFile.descdetail = data.descdetail;
                            vm.uploadFiles.push(uploadFile);
                        }
                    },
                    /**
                     * 当上传队列中所有文件都上传完成后触发,在所有的文件上传完毕时，提交表单
                     * @param uploader 当前的plupload实例对象
                     * @param files files为一个数组，里面的元素为本次已完成上传的所有文件对象
                     * @constructor
                     */
                    UploadComplete:function (uploader,files) {
                        console.log("上传队列中所有文件都上传完成：files",files);
                        console.log("uploadFiles：",JSON.stringify(vm.uploadFiles));
                        $.ajax({
                            url: g_comm.manager_url+"/testFileManager/saveUploadFile",
                            contentType:"application/json",
                            data: JSON.stringify(vm.uploadFiles),//序列化
                            success: function(r){
                                vm.uploadFiles=[];//清空数组
                                if(r.code == 0){
                                    layer.msg('提交成功！', {icon: 1});
                                    layer.closeAll();
                                    //重新刷新数据
                                    $('#tbTestFileManager').bootstrapTable('refresh');
                                }else{
                                    layerAlert('操作失败');
                                }
                            }
                        });
                    },
                    BeforeUpload:function(uploader,file){//当队列中的某一个文件正要开始上传前触发
                        console.log("当队列中的某一个文件正要开始上传前触发BeforeUpload");
                        //显示loading框
                        layer.load(0, { shade: [0.5, '#393D49'] ,zIndex :2147483647})
                    }
                }
            });
        },
        /**
         * 上传
         */
        uploadFile:function(){
            $("#uploader").html("");
            this.initUploader();//初始化文件上传对象
            showLayer("上传文件","fileUpload",800,700);
        },
        /**
         * 搜索
         */
        search:function () {
            $('#tbTestFileManager').bootstrapTable('refreshOptions',{pageNumber:1});
        }
    },
    mounted:function () {
        this.initTable();
    }
});